<template>
	<view v-if="name" class="_focus-icon-shell-class" :style="styleShell">
		
		<!-- nvue模式下 -->
		<text v-if="isNvue===true" class="focusFont" :class="classText" :style="styleText">{{Unicode[name]}}</text>
		
		<!-- vue模式下 -->
		<text v-else-if="isNvue===false" class="focusFont" :class="classText" :style="styleText"></text>
		
	</view>
</template>


<script>
	/**
	 * 字体图标
	 * @description vue/nvue通用，基础类组件，iconfont字体图标集，内置了focus-ui所需的图标
	 * @tutorial
	 * @property {String} tag 组件自定义标识，默认：focus-icon
	 * @property {String} name 图标在图标库的class名称，此字段没有提示，请对照图标库填写
	 * @property {String,Number} size 字体大小(rpx)，默认：30
	 * @property {String} color = [title|content|remark|placeholder|black|white|primary|success|warning|error|info] 内置的字体颜色，默认：primary；也可以直接填入十六进制RGB值，如：#FFFFFF
	 *   @value title 一级文字/标题颜色
	 *   @value content 二级文字/内容颜色
	 *   @value remark 三级文字/备注说明颜色
	 *   @value placeholder 四级文字/占位文字颜色
	 *   @value black 黑色
	 *   @value white 白色
	 *   @value primary 基本主体颜色
	 *   @value success 完成颜色
	 *   @value warning 警告颜色
	 *   @value error 错误颜色
	 *   @value info 信息颜色
	 * @property {String} colorscheme = [light|dark|disabled|hover] 文字颜色系别，仅支持内置color值域中的“主题色”，不填则使用常规
	 *   @value light 浅色系
	 *   @value dark 暗色系
	 *   @value disabled 禁用系
	 *   @value hover 点击态
	 */
	export default {
		name: "focus-icon",
		// 组件需要获取数据
		props: {
			"tag": { type: String, default: 'focus-icon' },
			"name": { type: String, default: '' },
			"size": { type: [String,Number], default: 30 },
			"color": { type: String, default: 'primary' },
			"colorscheme": { type: String, default: '' },
		},
		
		// 页面数据
		data() {
			return {
				// 是否处于nvue模式
				isNvue: null,
				// .nvue使用的Unicode对应表
				Unicode: {
					"fi-close": '\ue629',
					"fi-left": '\ue611',
					"fi-right": '\ue612',
					"fi-up": '\ue610',
					"fi-down": '\ue60f',
					"fi-tick": '\ue686',
					"fi-info": '\ue7b9',
					"fi-sigh": '\ue602',
					"fi-cross": '\ue61e',
					"fi-lightning": '\ue850',
					"fi-horn": '\ue6d0',
					"fi-img": '\ue626',
					"fi-loading-tadpole": '\ue65d',
					"fi-loading-line": '\ue6a6',
				}
			}
		},
		
		// 实例创建完成之前
		beforeCreate() {
			// .nvue文件引入字体图标
			// #ifdef APP-NVUE
			const domModule = weex.requireModule('dom');
			domModule.addRule('fontFace', {
			    'fontFamily': "focusFont",
			    'src': "url('data:font/truetype;charset=utf-8;base64,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bGxvLmNvbQAKAEMAcgBlAGEAdABlAGQAIABiAHkAIABpAGMAbwBuAGYAbwBuAHQACgBmAG8AYwB1AHMARgBvAG4AdABSAGUAZwB1AGwAYQByAGYAbwBjAHUAcwBGAG8AbgB0AGYAbwBjAHUAcwBGAG8AbgB0AFYAZQByAHMAaQBvAG4AIAAxAC4AMABmAG8AYwB1AHMARgBvAG4AdABHAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAHMAdgBnADIAdAB0AGYAIABmAHIAbwBtACAARgBvAG4AdABlAGwAbABvACAAcAByAG8AagBlAGMAdAAuAGgAdAB0AHAAOgAvAC8AZgBvAG4AdABlAGwAbABvAC4AYwBvAG0AAAAAAgAAAAAAAAAKAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPAQIBAwEEAQUBBgEHAQgBCQEKAQsBDAENAQ4BDwEQAAxsb2FkaW5nLWxpbmUPbG9hZGluZy10YWRwb2xlA2ltZwRob3JuCWxpZ2h0bmluZwVjcm9zcwRzaWdoBGluZm8EdGljawRkb3duAnVwBXJpZ2h0BGxlZnQFY2xvc2UAAAAAAA==')"
			});
			// #endif
		},
		
		// 实例创建完成
		created() {
			// #ifdef APP-NVUE
			this.isNvue = true;
			// #endif
			// #ifndef APP-NVUE
			this.isNvue = false;
			// #endif
		},
		
		// 计算属性
		computed: {
			// 外层容器style
			styleShell() {
				var obj_style = {};
				var str_style = '';
				
				// ======================================= 组件容器宽高
				if (this.size != null && Number(this.size) >= 0)
				{
					// 容器宽高
					// obj_style['width'] = this.size + 'rpx';
					obj_style['height'] = this.size + 'rpx';
				}
				
				// 循环样式对象
				for (let k in obj_style) { str_style += k + ':' + obj_style[k] + ';'; }
				// 结果返回
				return str_style; 
			},
			// 图标文字style
			styleText() {
				var obj_style = {};
				var str_style = '';
				
				// ======================================= 字体大小
				if (this.size != null && Number(this.size) >= 0)
				{
					// 字体大小
					obj_style['font-size'] = this.size + 'rpx';
					// 文字行高
					obj_style['line-height'] = this.size + 'rpx';
				}
				
				// ======================================= 文字颜色(16进制)
				if (this.color.length>0 && this.color.indexOf('#')>=0)
				{
					obj_style['color'] = this.color;
				}
				
				// 循环样式对象
				for (let k in obj_style) { str_style += k + ':' + obj_style[k] + ';'; }
				// 结果返回
				return str_style; 
			},
			// 图标文字class
			classText() {
				var arr_class = [];
				var str_class = '';
				
				// 图标库class存在 && 处于vue模式
				if (this.name.length && this.isNvue===false)
				{
					// 直接添加class名称
					arr_class.push(this.name);
				}
				
				// 内置文字颜色
				if (this.color.length>0 && this.color.indexOf('#')<0)
				{
					// 背景颜色 名称组合
					var className_color = '_focus-fontColor-' + this.color;
					// 是否传递背景色系
					if (this.colorscheme.length > 0) { className_color += '-' + this.colorscheme; }
					// 类名添加
					arr_class.push(className_color);
				}
				
				// 循环样式对象
				for (let k in arr_class) { str_class += arr_class[k] + ' '; }
				// 结果返回
				return str_class;
			}
		},
		
	}
</script>


<style lang="scss">
	// 文字颜色文件
	@import "../../lib/css/style-font.scss";
	
	/* vue模式下 - 引入字体图标css文件 */
	/* #ifndef APP-NVUE */
	@import "./iconfont.css";
	/* #endif */
	
	/* nvue模式下 - 字体图标定义 */
	/* #ifdef APP-NVUE */
	.focusFont{ font-family: focusFont; }
	/* #endif */
	
	/* 组件外层 */
	._focus-icon-shell-class{ flex-direction: column; justify-content: center; align-items: center;
		/* #ifndef APP-NVUE */
		display: flex; box-sizing: border-box;
		/* #endif */
	}
	
</style>